<template>
	
	<el-dialog 
			class="dialogClass" 
				:close-on-press-escape="false" 
				:visible.sync="userInfoShow" 
				:show-close="false" 
				fullscreen
				:modal="false"
				>
					<div style="display: flex;justify-content: space-between;">

				<!-- 左边导航 -->
				<div  class="detail-content">
					<div class="detail-header">
						<div class="page-title">
							<i @click="onBack" class="el-icon-arrow-left"></i>
							<span>会员卡详情页</span>
							</div>
						<div class="user-detail-info">
							<div class="img-view"></div>
							<div>
								<p>王麻子</p>
								<p>1759874124545</p>
							</div>
						</div>
					</div>

					<div class="left-menu">
						<p v-for="item in 10" :key="item">储蓄收益</p>
					</div>
				</div>


				<div class="content-view">
					<div class="user-card-info">
						<div class="user-title">会员信息</div>
					</div>
				</div>



				</div>
		</el-dialog>
		
</template>

<script>
export default {
	name: 'cashier',
	components: { },
	data() {
		return {
			userInfoShow: false,
		};
	},
	created() {

	},
	computed: {
	
		
	},
	mounted() {
	},
	methods: {
		onBack () {
			this.userInfoShow = false;
		},
		show () {
			this.userInfoShow = true;
		},
	},
};
</script>

<style scoped lang="scss">
.detail-content {
	position: relative;
    min-width: 260px;
    height: 100%;
    background: #f8f8f8;
    z-index: 10;
    border-right: 1px solid hsla(0,0%,86.3%,.7);
	width: 260px;
}
.page-title {
    font-size: 20px;
    color: #28282d;
	cursor: pointer;
}
.page-title span{
	margin-left: 30px;
}
.img-view {
	width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #eee url(https://static.bokao2o.com/wisdomCashier/images/Member_AddGray.png) 50%/28px no-repeat;
}
.left-menu {
	text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    padding: 10px 0;
}
.left-menu p {
	cursor: pointer;
	line-height: 54px;
    height: 54px;
    background: #fff;
    color: #5a5a5a;
    font-size: 15px;
}
.user-detail-info {
	display: flex;
    align-items: center;
	padding: 18px 16px;
}
.user-detail-info div:nth-child(2){
	margin-left: 10px;
}
.user-detail-info div p{
	line-height: 28px;
	color: #5a5a5a;
    font-size: 16px;
}

.user-detail-info div p:first-child{
    font-size: 20px;
    font-family: PingFangSC-Semibold;
}
.detail-header {
	background: #fff;
    margin-bottom: 16px;
}
.user-title {
    height: 180px;
    padding: 35px 0 105px 0;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-family: PingFangSC-Medium;
    color: #fff;
    background: transparent url(https://static.bokao2o.com/wisdomDesk/images/Member_CardIInfo_TopImg.png) top/100% no-repeat;
}

.content-view {
	width: 100%;
    height: 100%;
    background: #fff;
}
.user-card-info {
	width: 100%;
    color: #28282d;
    background: #fff;
}
</style>
